<style>
.borderNone input.el-input__inner {
  border: 0;
}

.borderNone select.el-select-dropdown__empty {
  border: 0;
}
</style>
<template>
  <div class="app-container">
    <el-tabs ref="tabs" v-model="active">
      <el-tab-pane name="first">
        <el-tabs @tab-click="handleClick" v-model="activeName">
          <el-tab-pane label="月考勤统计" name="first">

            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
              <el-form-item>
                {{ parseTime(queryParams.createTime, '{y}年{m}月') }}考勤
              </el-form-item>
              <el-form-item prop="createTime">
                <el-date-picker
                  v-model="queryParams.createTime"
                  :editable="false"
                  :clearable="false"
                  @change="createTimeChange"
                  value-format="yyyy-MM"
                  type="month"
                  placeholder="选择月份">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="" prop="all">
                <el-input v-model="queryParams.all" placeholder="支持姓名/工号查询" clearable/>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
                <el-button icon="el-icon-refresh" type="warning" size="mini" @click="resetQuery">重置</el-button>
                <el-button v-if="parseTime(queryParams.createTime, '{y}{m}') === parseTime(new Date(), '{y}{m}')" @click="synchronizationAttendance" size="mini" style="margin-top: 3px;padding-top: 7px">
                  拉取本月考勤人员
                </el-button>
                <el-button v-if="parseTime(queryParams.createTime, '{y}{m}') === parseTime(new Date(), '{y}{m}')"
                           @click="synchronizationSalary" size="mini" style="margin-top: 3px;padding-top: 7px">
                  同步薪酬
                </el-button>
              </el-form-item>
            </el-form>

            <div style="float: left">
              <el-form>
                <el-button v-if="butType === '1'" type="primary" @click="changeList('1')">总出勤</el-button>
                <el-button v-if="butType !== '1'" @click="changeList('1')">总出勤</el-button>
                <el-button v-if="butType === '3'" type="primary" @click="changeList('3')">试用</el-button>
                <el-button v-if="butType !== '3'" @click="changeList('3')" plain>试用</el-button>
                <el-button v-if="butType === '4'" type="primary" @click="changeList('4')">正式</el-button>
                <el-button v-if="butType !== '4'" @click="changeList('4')" plain>正式</el-button>
                <el-button v-if="butType === '6'" type="primary" @click="changeList('6')">离职</el-button>
                <el-button v-if="butType !== '6'" @click="changeList('6')" plain>离职</el-button>
              </el-form>
            </div>
            <div style="float: right;">
              <el-button type="text" style="color: #1e1e1e;font-size: 20px" @click="handleExport"
              >导出
              </el-button>&nbsp;
              <el-button type="text" style="color: #1e1e1e;font-size: 20px" @click="handleUpdate">|&nbsp;&nbsp;批量修改</el-button>&nbsp;
              <el-button v-if="parseTime(queryParams.createTime, '{y}{m}') === parseTime(new Date(), '{y}{m}')" type="text" style="color: #1e1e1e;font-size: 20px" @click="dialogVisible = true">|&nbsp;&nbsp;批量上传
              </el-button>
            </div>
            <br/>
            <el-dialog :visible.sync="dialogVisible">
              <el-descriptions title="导入月度考勤汇总表" class="margin-top" :column="2" border>
                <el-descriptions-item :span="0">
                  <template slot="label">
                    <h3 style="text-align: center;">
                      适合企业
                    </h3>
                  </template>
                  <h4 style="text-align: center">
                    使用钉钉考勤机打卡或在钉钉APP上打卡的企业
                  </h4>
                </el-descriptions-item>
              </el-descriptions>
              <el-descriptions class="margin-top" :column="2" border>
                <el-descriptions-item :span="0">
                  <template slot="label">
                    <h3 style="text-align: center;width: 124px;margin-left: 16px;">
                      对接简介
                    </h3>
                  </template>
                  <h4 style="text-align: center">
                    因系统需要根据员工工号进行信息匹配，您首先需要统一员工在钉钉和HR的工号信息。
                  </h4>
                </el-descriptions-item>
              </el-descriptions>
              <el-descriptions class="margin-top" :column="2" border>
                <el-descriptions-item :span="0">
                  <template slot="label">
                    <h3 style="text-align: center;width: 154px">
                      操作流程
                    </h3>
                  </template>
                  <h4 style="margin-left: 26px">
                    1、登录【钉钉管理后台】
                    <br>
                    2、进入【通讯录管理—>批量导入/导出—>导出修改通讯录】，导出所有员工信息。
                    <br>
                    3、修改导出Excel中的员工工号，与HR保持一致，再导入钉钉。<br>
                    4、进入【考勤打卡—>考勤统计—>月度汇总】，导出企业本月的考勤【月度汇总表】。<br>
                    特别说明：<br>
                    a、工号必须保持一致<br>
                    b、在添加新员工时，请记得使员工在钉钉和HR的工号信息一致！<br>
                    c、导入考勤月度汇总表后，记录在月度考勤明细中，系统将按月度汇总表的结果进行考勤核算。<br>
                    <el-form :model="uploadForm" ref="uploadForm">
                      <el-form-item>
                        <el-upload action="111" accept=".xlsx"
                        :on-success="handleExcelUpload"  :before-upload="beforeExcelUpload">
                          <el-button type="primary" size="mini">导入钉钉月度考勤汇总表
                            <i class="el-icon-upload el-icon--right"></i>
                          </el-button>
                        </el-upload>
                      </el-form-item>
                    </el-form>
                  </h4>
                </el-descriptions-item>
              </el-descriptions>
            </el-dialog>
            <el-table v-loading="loading" :data="attendanceList"
                      style="width: 100%">
              <el-table-column label="姓名" align="center" prop="empName"/>
              <el-table-column label="工号" align="center" prop="jobNo"/>
              <el-table-column label="部门" align="center" prop="deptName"/>
              <el-table-column label="岗位" width="140" :show-overflow-tooltip="true" align="center"
                               prop="positionApplied"/>
              <!--<el-table-column label="公司" width="160" :show-overflow-tooltip="true" align="center" prop="enterprise"/>-->
              <el-table-column label="工作性质" align="center" prop="workNature"/>
              <el-table-column label="员工状态" align="center" prop="empStatus">
                <template slot-scope="scope">
                  <span v-if="scope.row.empStatus === 3">试用</span>
                  <span v-if="scope.row.empStatus === 4">正式</span>
                  <span v-if="scope.row.empStatus === 6">离职</span>
                </template>
              </el-table-column>
              <el-table-column label="应出勤天数" align="center" prop="standardDay"/>
              <el-table-column label="实际出勤天数" align="center" prop="attendanceDay"/>
              <el-table-column label="试用期出勤天数" align="center" prop="probationPeriodDay"/>
              <el-table-column label="转正出勤天数" align="center" prop="officialPeriodDay"/>
              <el-table-column label="加班补贴" align="center" prop="overtime"></el-table-column>
              <el-table-column label="考勤日扣款" align="center" prop="attendanceDeductMoney"></el-table-column>
              <el-table-column label="事病假扣款" align="center" prop="leaveDeductMoney"></el-table-column>
              <el-table-column label="其他扣款" align="center" prop="elseDeductMoney"></el-table-column>
              <el-table-column label="考勤状态" align="center" prop="status">
                <template scope="scope">
                  <span v-if="scope.row.status === '0'">未上传</span>
                  <span v-if="scope.row.status === '1'">已上传</span>
                </template>
              </el-table-column>
            </el-table>

            <pagination v-show=" total>0" :total="total" :page.sync="queryParams.pageNum"
                        :limit.sync="queryParams.pageSize"
                        @pagination="getList"/>

          </el-tab-pane>
          <el-tab-pane label="月考勤明细" name="second">

            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
              <el-form-item>
                {{ parseTime(queryParams.createTime, '{y}年{m}月') }}考勤明细
              </el-form-item>
              <el-form-item prop="createTime">
                <el-date-picker
                  v-model="queryParams.createTime"
                  :editable="false"
                  :clearable="false"
                  @change="createTimeChange"
                  value-format="yyyy-MM"
                  type="month"
                  placeholder="选择月份">
                </el-date-picker>
              </el-form-item>
            </el-form>
            <div style="float: right;">
              <span v-if="editInfoFlag === false">
                <el-button type="text" style="color: #1e1e1e;font-size: 20px" @click="handleExport">导出
              </el-button>&nbsp;&nbsp;|
              <el-button type="text" style="color: #1e1e1e;font-size: 20px"
                         @click="editInfoFlag = true">批量修改</el-button>
              </span>
              <span v-if="editInfoFlag === true">
                 <el-button @click="closeInfo">放弃编辑</el-button>
                <el-button @click="submitInfo">保存</el-button>
              </span>
            </div>
            <el-table
              :data="attendanceDetailList"
              v-loading="loading"
              border height="620"
              style="width: 100%">
              <el-table-column type="index" fixed align="center" width="50"></el-table-column>
              <el-table-column fixed label="姓名" :show-overflow-tooltip="true" align="center" prop="empName"/>
              <el-table-column fixed label="工号" :show-overflow-tooltip="true" align="center" prop="jobNo"/>
              <el-table-column fixed label="部门" :show-overflow-tooltip="true" align="center" prop="deptName"/>
              <el-table-column label="岗位" width="140" :show-overflow-tooltip="true" align="center"
                               prop="positionApplied"/>
             <!-- <el-table-column label="公司" width="160" :show-overflow-tooltip="true" align="center"
                               prop="enterprise"/>-->
              <el-table-column label="工作性质" :show-overflow-tooltip="true" align="center" prop="workNature"/>
              <el-table-column label="员工状态" :show-overflow-tooltip="true" align="center" prop="empStatus">
                <template slot-scope="scope">
                  <span v-if="scope.row.empStatus === 3">试用</span>
                  <span v-if="scope.row.empStatus === 4">正式</span>
                  <span v-if="scope.row.empStatus === 6">离职</span>
                </template>
              </el-table-column>
              <el-table-column align="center" :show-overflow-tooltip="true" prop="one" label="1">
                <template slot-scope="scope">
                  <el-input onfocus="{value =''}" v-if="editInfoFlag" v-model="scope.row.one"></el-input>
                  <span v-else>{{ scope.row.one }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" :show-overflow-tooltip="true" prop="two" label="2">
                <template slot-scope="scope">
                  <el-input onfocus="{value =''}" v-if="editInfoFlag" v-model="scope.row.two"></el-input>
                  <span v-else>{{ scope.row.two }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" :show-overflow-tooltip="true" prop="three" label="3">
                <template slot-scope="scope">
                  <el-input onfocus="{value =''}" v-if="editInfoFlag" v-model="scope.row.three"></el-input>
                  <span v-else>{{ scope.row.three }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" :show-overflow-tooltip="true" prop="four" label="4">
                <template slot-scope="scope">
                  <el-input onfocus="{value =''}" v-if="editInfoFlag" v-model="scope.row.four"></el-input>
                  <span v-else>{{ scope.row.four }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" :show-overflow-tooltip="true" prop="five" label="5">
                <template slot-scope="scope">
                  <el-input onfocus="{value =''}" v-if="editInfoFlag" v-model="scope.row.five"></el-input>
                  <span v-else>{{ scope.row.five }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" :show-overflow-tooltip="true" prop="six" label="6">
                <template slot-scope="scope">
                  <el-input onfocus="{value =''}" v-if="editInfoFlag" v-model="scope.row.six"></el-input>
                  <span v-else>{{ scope.row.six }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" :show-overflow-tooltip="true" prop="seven" label="7">
                <template slot-scope="scope">
                  <el-input onfocus="{value =''}" v-if="editInfoFlag" v-model="scope.row.seven"></el-input>
                  <span v-else>{{ scope.row.seven }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" :show-overflow-tooltip="true" prop="eight" label="8">
                <template slot-scope="scope">
                  <el-input onfocus="{value =''}" v-if="editInfoFlag" v-model="scope.row.eight"></el-input>
                  <span v-else>{{ scope.row.eight }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" :show-overflow-tooltip="true" prop="nine" label="9">
                <template slot-scope="scope">
                  <el-input onfocus="{value =''}" v-if="editInfoFlag" v-model="scope.row.nine"></el-input>
                  <span v-else>{{ scope.row.nine }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" :show-overflow-tooltip="true" prop="ten" label="10">
                <template slot-scope="scope">
                  <el-input onfocus="{value =''}" v-if="editInfoFlag" v-model="scope.row.ten"></el-input>
                  <span v-else>{{ scope.row.ten }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" :show-overflow-tooltip="true" prop="eleven" label="11">
                <template slot-scope="scope">
                  <el-input onfocus="{value =''}" v-if="editInfoFlag" v-model="scope.row.eleven"></el-input>
                  <span v-else>{{ scope.row.eleven }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" :show-overflow-tooltip="true" prop="twelve" label="12">
                <template slot-scope="scope">
                  <el-input onfocus="{value =''}" v-if="editInfoFlag" v-model="scope.row.twelve"></el-input>
                  <span v-else>{{ scope.row.twelve }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" :show-overflow-tooltip="true" prop="thirteen" label="13">
                <template slot-scope="scope">
                  <el-input onfocus="{value =''}" v-if="editInfoFlag" v-model="scope.row.thirteen"></el-input>
                  <span v-else>{{ scope.row.thirteen }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" :show-overflow-tooltip="true" prop="fourteen" label="14">
                <template slot-scope="scope">
                  <el-input onfocus="{value =''}" v-if="editInfoFlag" v-model="scope.row.fourteen"></el-input>
                  <span v-else>{{ scope.row.fourteen }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" :show-overflow-tooltip="true" prop="fifteen" label="15">
                <template slot-scope="scope">
                  <el-input onfocus="{value =''}" v-if="editInfoFlag" v-model="scope.row.fifteen"></el-input>
                  <span v-else>{{ scope.row.fifteen }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" :show-overflow-tooltip="true" prop="sixteen" label="16">
                <template slot-scope="scope">
                  <el-input onfocus="{value =''}" v-if="editInfoFlag" v-model="scope.row.sixteen"></el-input>
                  <span v-else>{{ scope.row.sixteen }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" :show-overflow-tooltip="true" prop="seventeen" label="17">
                <template slot-scope="scope">
                  <el-input onfocus="{value =''}" v-if="editInfoFlag" v-model="scope.row.seventeen"></el-input>
                  <span v-else>{{ scope.row.seventeen }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" :show-overflow-tooltip="true" prop="eighteen" label="18">
                <template slot-scope="scope">
                  <el-input onfocus="{value =''}" v-if="editInfoFlag" v-model="scope.row.eighteen"></el-input>
                  <span v-else>{{ scope.row.eighteen }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" :show-overflow-tooltip="true" prop="nineteen" label="19">
                <template slot-scope="scope">
                  <el-input onfocus="{value =''}" v-if="editInfoFlag" v-model="scope.row.nineteen"></el-input>
                  <span v-else>{{ scope.row.nineteen }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" :show-overflow-tooltip="true" prop="twenty" label="20">
                <template slot-scope="scope">
                  <el-input onfocus="{value =''}" v-if="editInfoFlag" v-model="scope.row.twenty"></el-input>
                  <span v-else>{{ scope.row.twenty }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" :show-overflow-tooltip="true" prop="twentyOne" label="21">
                <template slot-scope="scope">
                  <el-input onfocus="{value =''}" v-if="editInfoFlag" v-model="scope.row.twentyOne"></el-input>
                  <span v-else>{{ scope.row.twentyOne }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" :show-overflow-tooltip="true" prop="twentyTwo" label="22">
                <template slot-scope="scope">
                  <el-input onfocus="{value =''}" v-if="editInfoFlag" v-model="scope.row.twentyTwo"></el-input>
                  <span v-else>{{ scope.row.twentyTwo }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" :show-overflow-tooltip="true" prop="twentyThree" label="23">
                <template slot-scope="scope">
                  <el-input onfocus="{value =''}" v-if="editInfoFlag" v-model="scope.row.twentyThree"></el-input>
                  <span v-else>{{ scope.row.twentyThree }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" :show-overflow-tooltip="true" prop="twentyFour" label="24">
                <template slot-scope="scope">
                  <el-input onfocus="{value =''}" v-if="editInfoFlag" v-model="scope.row.twentyFour"></el-input>
                  <span v-else>{{ scope.row.twentyFour }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" :show-overflow-tooltip="true" prop="twentyFive" label="25">
                <template slot-scope="scope">
                  <el-input onfocus="{value =''}" v-if="editInfoFlag" v-model="scope.row.twentyFive"></el-input>
                  <span v-else>{{ scope.row.twentyFive }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" :show-overflow-tooltip="true" prop="twentySix" label="26">
                <template slot-scope="scope">
                  <el-input onfocus="{value =''}" v-if="editInfoFlag" v-model="scope.row.twentySix"></el-input>
                  <span v-else>{{ scope.row.twentySix }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" :show-overflow-tooltip="true" prop="twentySeven" label="27">
                <template slot-scope="scope">
                  <el-input onfocus="{value =''}" v-if="editInfoFlag" v-model="scope.row.twentySeven"></el-input>
                  <span v-else>{{ scope.row.twentySeven }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" :show-overflow-tooltip="true" prop="twentyEight" label="28">
                <template slot-scope="scope">
                  <el-input onfocus="{value =''}" v-if="editInfoFlag" v-model="scope.row.twentyEight"></el-input>
                  <span v-else>{{ scope.row.twentyEight }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" v-if="intercalary" :show-overflow-tooltip="true" prop="twentyNine"
                               label="29">
                <template slot-scope="scope">
                  <el-input onfocus="{value =''}" v-if="editInfoFlag" v-model="scope.row.twentyNine"></el-input>
                  <span v-else>{{ scope.row.twentyNine }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" v-if="flag" :show-overflow-tooltip="true" prop="thirty" label="30"
              >
                <template slot-scope="scope">
                  <el-input onfocus="{value =''}" v-if="editInfoFlag" v-model="scope.row.thirty"></el-input>
                  <span v-else>{{ scope.row.thirty }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" v-if="flag" :show-overflow-tooltip="true" prop="thirtyOne" label="31"
              >
                <template slot-scope="scope">
                  <el-input onfocus="{value =''}" v-if="editInfoFlag" v-model="scope.row.thirtyOne"></el-input>
                  <span v-else>{{ scope.row.thirtyOne }}</span>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane name="second">
        <div style="float: right;margin-bottom: 10px">
          <span style="font-size: 20px;margin-right: 500px">批量编辑/批量录入</span>
          <el-button @click="onBack()">放弃编辑</el-button>
          <el-button @click="submitAttendance()" type="primary">保存</el-button>
        </div>
        <el-table v-loading="loading" :data="attendanceAllList"
                  style="width: 100%" height="620" border>
          <el-table-column type="index" fixed align="center" width="50"></el-table-column>
          <el-table-column fixed label="姓名" align="center" prop="empName"/>
          <el-table-column fixed label="工号" align="center" prop="jobNo"/>
          <el-table-column fixed label="部门" align="center" prop="deptName"/>
          <el-table-column width="140" :show-overflow-tooltip="true" label="岗位" align="center"
                           prop="positionApplied"/>
         <!-- <el-table-column width="160" label="公司" :show-overflow-tooltip="true" align="center" prop="enterprise"/>-->
          <el-table-column label="工作性质" align="center" prop="workNature"/>
          <el-table-column label="员工状态" align="center" prop="empStatus">
            <template slot-scope="scope">
              <span v-if="scope.row.empStatus === 3">试用</span>
              <span v-if="scope.row.empStatus === 4">正式</span>
              <span v-if="scope.row.empStatus === 6">离职</span>
            </template>
          </el-table-column>
          <el-table-column label="考勤状态" align="center" prop="status">
            <template scope="scope">
              <span v-if="scope.row.status === '0'">未上传</span>
              <span v-if="scope.row.status === '1'">已上传</span>
            </template>
          </el-table-column>
          <el-table-column width="120" label="应出勤天数" align="center" prop="standardDay">
            <template slot-scope="scope">
              <el-input onfocus="{value =''}" oninput="value=value.replace(/[^0-9.]/g,'');if(value>31)value=31"
                        v-model="scope.row.standardDay"></el-input>
            </template>
          </el-table-column>
          <el-table-column width="120" label="实际出勤天数" align="center" prop="attendanceDay">
            <template slot-scope="scope">
              <el-input onfocus="{value =''}" oninput="value=value.replace(/[^0-9.]/g,'');if(value>31)value=31"
                        v-model="scope.row.attendanceDay"></el-input>
            </template>
          </el-table-column>
          <el-table-column width="120" label="试用期出勤天数" align="center" prop="probationPeriodDay">
            <template slot-scope="scope">
              <el-input onfocus="{value =''}" oninput="value=value.replace(/[^0-9.]/g,'');if(value>31)value=31"
                        v-model="scope.row.probationPeriodDay"></el-input>
            </template>
          </el-table-column>
          <el-table-column width="120" label="转正出勤天数" align="center" prop="officialPeriodDay">
            <template slot-scope="scope">
              <el-input onfocus="{value =''}" oninput="value=value.replace(/[^0-9.]/g,'');if(value>31)value=31"
                        v-model="scope.row.officialPeriodDay"></el-input>
            </template>
          </el-table-column>
          <el-table-column width="120" label="加班补贴" align="center" prop="overtime">
            <template slot-scope="scope">
              <el-input onfocus="{value =''}" oninput="value=value.replace(/[^0-9.]/g,'')"
                        v-model="scope.row.overtime"></el-input>
            </template>
          </el-table-column>
          <el-table-column width="120" label="考勤日扣款" align="center" prop="attendanceDeductMoney">
            <template slot-scope="scope">
              <el-input onfocus="{value =''}" oninput="value=value.replace(/[^0-9.]/g,'')"
                        v-model="scope.row.attendanceDeductMoney"></el-input>
            </template>
          </el-table-column>
          <el-table-column width="120" label="事病假扣款" align="center" prop="leaveDeductMoney">
            <template slot-scope="scope">
              <el-input onfocus="{value =''}" oninput="value=value.replace(/[^0-9.]/g,'')"
                        v-model="scope.row.leaveDeductMoney"></el-input>
            </template>
          </el-table-column>
          <el-table-column width="120" label="其他扣款" align="center" prop="elseDeductMoney">
            <template slot-scope="scope">
              <el-input onfocus="{value =''}" oninput="value=value.replace(/[^0-9.]/g,'')"
                        v-model="scope.row.elseDeductMoney"></el-input>
            </template>
          </el-table-column>
          <el-table-column width="120" label="休息天数" align="center" prop="restDays">
            <template slot-scope="scope">
              <el-input onfocus="{value =''}" oninput="value=value.replace(/[^0-9.]/g,'')"
                        v-model="scope.row.restDays"></el-input>
            </template>
          </el-table-column>
          <el-table-column width="120" label="工作时长" align="center" prop="workingHours">
            <template slot-scope="scope">
              <el-input onfocus="{value =''}" oninput="value=value.replace(/[^0-9.]/g,'')"
                        v-model="scope.row.workingHours"></el-input>
            </template>
          </el-table-column>
          <el-table-column width="120" label="迟到次数" align="center" prop="beLateLimit">
            <template slot-scope="scope">
              <el-input onfocus="{value =''}" oninput="value=value.replace(/[^0-9.]/g,'')"
                        v-model="scope.row.beLateLimit"></el-input>
            </template>
          </el-table-column>
          <el-table-column width="120" label="迟到时长" align="center" prop="beLateTime">
            <template slot-scope="scope">
              <el-input onfocus="{value =''}" oninput="value=value.replace(/[^0-9.]/g,'')"
                        v-model="scope.row.beLateTime"></el-input>
            </template>
          </el-table-column>
          <el-table-column width="120" label="严重迟到次数" align="center" prop="severityLateLimit">
            <template slot-scope="scope">
              <el-input onfocus="{value =''}" oninput="value=value.replace(/[^0-9.]/g,'')"
                        v-model="scope.row.severityLateLimit"></el-input>
            </template>
          </el-table-column>
          <el-table-column width="120" label="严重迟到时长" align="center" prop="severityLateTime">
            <template slot-scope="scope">
              <el-input onfocus="{value =''}" oninput="value=value.replace(/[^0-9.]/g,'')"
                        v-model="scope.row.severityLateTime"></el-input>
            </template>
          </el-table-column>
          <el-table-column width="120" label="旷工迟到次数" align="center" prop="absenteeismLateLimit">
            <template slot-scope="scope">
              <el-input onfocus="{value =''}" oninput="value=value.replace(/[^0-9.]/g,'')"
                        v-model="scope.row.absenteeismLateLimit"></el-input>
            </template>
          </el-table-column>
          <el-table-column width="120" label="早退次数" align="center" prop="leaveEarlyLimit">
            <template slot-scope="scope">
              <el-input onfocus="{value =''}" oninput="value=value.replace(/[^0-9.]/g,'')"
                        v-model="scope.row.leaveEarlyLimit"></el-input>
            </template>
          </el-table-column>
          <el-table-column width="120" label="早退时长" align="center" prop="leaveEarlyTime">
            <template slot-scope="scope">
              <el-input onfocus="{value =''}" oninput="value=value.replace(/[^0-9.]/g,'')"
                        v-model="scope.row.leaveEarlyTime"></el-input>
            </template>
          </el-table-column>
          <el-table-column width="120" label="上班缺卡次数" align="center" prop="workLackLimit">
            <template slot-scope="scope">
              <el-input onfocus="{value =''}" oninput="value=value.replace(/[^0-9.]/g,'')"
                        v-model="scope.row.workLackLimit"></el-input>
            </template>
          </el-table-column>
          <el-table-column width="120" label="下班缺卡次数" align="center" prop="offDutyLackLimit">
            <template slot-scope="scope">
              <el-input onfocus="{value =''}" oninput="value=value.replace(/[^0-9.]/g,'')"
                        v-model="scope.row.offDutyLackLimit"></el-input>
            </template>
          </el-table-column>
          <el-table-column width="120" label="旷工天数" align="center" prop="absenteeismDays">
            <template slot-scope="scope">
              <el-input onfocus="{value =''}" oninput="value=value.replace(/[^0-9.]/g,'')"
                        v-model="scope.row.absenteeismDays"></el-input>
            </template>
          </el-table-column>
          <el-table-column width="120" label="出差时长" align="center" prop="travelTime">
            <template slot-scope="scope">
              <el-input onfocus="{value =''}" oninput="value=value.replace(/[^0-9.]/g,'')"
                        v-model="scope.row.travelTime"></el-input>
            </template>
          </el-table-column>
          <el-table-column width="120" label="外出时长" align="center" prop="outsideTime">
            <template slot-scope="scope">
              <el-input onfocus="{value =''}" oninput="value=value.replace(/[^0-9.]/g,'')"
                        v-model="scope.row.outsideTime"></el-input>
            </template>
          </el-table-column>
          <el-table-column width="120" label="加班-审批单统计" align="center" prop="countOvertime">
            <template slot-scope="scope">
              <el-input onfocus="{value =''}" oninput="value=value.replace(/[^0-9.]/g,'')"
                        v-model="scope.row.countOvertime"></el-input>
            </template>
          </el-table-column>
          <el-table-column width="120" label="工作日加班" align="center" prop="workdayOvertime">
            <template slot-scope="scope">
              <el-input onfocus="{value =''}" oninput="value=value.replace(/[^0-9.]/g,'')"
                        v-model="scope.row.workdayOvertime"></el-input>
            </template>
          </el-table-column>
          <el-table-column width="120" label="休息日加班" align="center" prop="restOvertime">
            <template slot-scope="scope">
              <el-input onfocus="{value =''}" oninput="value=value.replace(/[^0-9.]/g,'')"
                        v-model="scope.row.restOvertime"></el-input>
            </template>
          </el-table-column>
          <el-table-column width="120" label="节假日加班" align="center" prop="holidayOvertime">
            <template slot-scope="scope">
              <el-input onfocus="{value =''}" oninput="value=value.replace(/[^0-9.]/g,'')"
                        v-model="scope.row.holidayOvertime"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Template from "@/views/system/email/ItoTemplate";

Date.prototype.format = function (fmt) {
  var o = {
    "M+": this.getMonth() + 1, //月份
    "d+": this.getDate(), //日
    "h+": this.getHours(), //小时
    "m+": this.getMinutes(), //分
    "s+": this.getSeconds(), //秒
    "q+": Math.floor((this.getMonth() + 3) / 3), //季度
    "S": this.getMilliseconds() //毫秒
  };
  if (/(y+)/.test(fmt)) {
    fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
  }
  for (var k in o) {
    if (new RegExp("(" + k + ")").test(fmt)) {
      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    }
  }
  return fmt;
}
import {
  attendanceList,
  attendanceAllList,
  synchronizationAttendance,
  detailList,
  editInfoList,
  editAttendanceList,
  synchronizationSalary,
  excelUpload
} from "@/api/system/attendance";

export default {
  name: "Attendance",
  components: {Template},
  data() {
    return {
      activeName: 'first',
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        all: null,
        createTime: new Date(new Date()).format("yyyy-MM-dd"),
        status: '1'
      },
      total: 0,
      active: 'first',
      attendanceAllList: [],
      attendanceList: [],
      butType: '1',
      loading: false,
      attendanceDetailList: [],
      flag: false,
      intercalary: false,
      editInfoFlag: false,
      dialogVisible: false,
      uploadForm:{},
    };
  },
  created() {
    this.getList();
    this.getDetailList()
  },
  methods: {
    handleExcelUpload(res,file){

    },
    beforeExcelUpload(file){
      if (file != null){
        let formData = new FormData();
        formData.append('file', file)
        const loading = this.$loading({
          lock: true,
          text: '正在导入钉钉考勤数据，请稍等',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        excelUpload(formData).then(res =>{
          this.dialogVisible = false
          this.getList();
          this.getDetailList()
          loading.close();
          this.$message({
            type: 'success',
            message: '已保存'
          });
        }).catch(e =>{
          this.getList();
          this.getDetailList()
          loading.close();
        })
      }
      return false;
    },
    synchronizationSalary() {

      this.$confirm('此操作将同步本月考勤信息到薪酬列表', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: '正在同步到薪酬列表，请稍等！',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        synchronizationSalary(this.queryParams).then(res => {
          loading.close();
          this.$message({
            type: 'success',
            message: '已同步'
          });
        })
      }).catch(() => {
        loading.close();
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    closeInfo() {
      this.$confirm('确定要放弃编辑吗？放弃后，已经录入的数据将不会被保存。', '提示', {
        confirmButtonText: '继续编辑',
        cancelButtonText: '放弃编辑',
        type: 'warning'
      }).then(() => {

      }).catch(() => {
        this.getDetailList()
        this.editInfoFlag = false
      });
    },
    submitAttendance() {
      this.$confirm('是否确认保存此次修改', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: '正在保存此次修改内容，请稍等！',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        editAttendanceList(this.attendanceAllList).then(res => {
          loading.close();
          this.getList()
          this.$message({
            type: 'success',
            message: '已保存'
          });
          this.active = 'first'
        }).catch(e => {
          loading.close();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    submitInfo() {
      this.$confirm('是否确认保存此次修改', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: '正在保存此次修改内容，请稍等！',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        editInfoList(this.attendanceDetailList).then(res => {
          loading.close();
          this.getDetailList()
          this.editInfoFlag = false
          this.$message({
            type: 'success',
            message: '已保存'
          });
        }).catch(e => {
          loading.close();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    flagAll() {
      console.log(parseInt(new Date(this.queryParams.createTime).format("MM")))
      switch (parseInt(new Date(this.queryParams.createTime).format("MM"))) {
        case 1:
          this.flag = true
          return
        case 2:
          let year = parseInt(new Date(this.queryParams.createTime).format("yyyy"));
          if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
            this.intercalary = true
          } else {
            this.intercalary = false
          }
          this.flag = false
          return;
        case 4:
          this.flag = false
          return;
        case 3:
          this.flag = true
          return
        case 5:
          this.flag = true
          return
        case 6:
          this.flag = false
          return
        case 7:
          this.flag = true
          return
        case 8:
          this.flag = true
          return
        case 9:
          this.flag = false
          return
        case 10:
          this.flag = true
          return
        case 11:
          this.flag = false
          return
        case 12:
          this.flag = true
          return
      }
    },
    handleClick() {
      if (this.activeName === 'first') {
        if (this.editInfoFlag === true) {
          this.$confirm('确定要放弃编辑吗？放弃后，已经录入的数据将不会被保存。', '提示', {
            confirmButtonText: '继续编辑',
            cancelButtonText: '放弃编辑',
            type: 'warning'
          }).then(() => {
            this.activeName = 'second'
          }).catch(() => {
            this.getDetailList()
            this.editInfoFlag = false
          });
        } else {
          this.resetQuery()
        }
      } else {
        this.flagAll()
        this.getDetailList()
      }
    },
    getDetailList() {
      this.loading = true
      detailList(this.queryParams).then(res => {
        this.attendanceDetailList = res.data
        this.loading = false
      }).catch(e => {
        this.loading = false
      })
    },
    synchronizationAttendance() {
      this.$confirm('是否确认同步本月考勤数据', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: '正在同步本月考勤数据，请稍等！',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        synchronizationAttendance(this.queryParams.createTime).then(res => {
          loading.close();
          this.handleQuery()
          this.$message({
            message: '已同步本月考勤',
            type: 'success'
          });
        }).catch(e => {
          loading.close();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    createTimeChange() {
      this.getList();
      this.getDetailList()
    },
    changeList(val) {
      this.butType = val
      this.queryParams.status = val
      this.getList();
    },
    getList() {
      this.loading = true
      attendanceList(this.queryParams).then(res => {
        this.attendanceList = res.rows
        this.total = res.total
        this.loading = false
      }).catch(e => {
        this.loading = false
      })
    },
    handleUpdate() {
      this.active = 'second'
      this.loading = true
      attendanceAllList(this.queryParams).then(res => {
        this.attendanceAllList = res.data
        this.loading = false
      }).catch(e => {
        this.loading = false
      })
    },
    onBack() {
      this.$confirm('确定要放弃编辑吗？放弃后，已经录入的数据将不会被保存。', '提示', {
        confirmButtonText: '继续编辑',
        cancelButtonText: '放弃编辑',
        type: 'warning'
      }).then(() => {

      }).catch(() => {
        this.active = 'first';
      });

    },
    handleSelectionChange(val) {

    },
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    resetQuery() {
      this.queryParams.all = ''
      this.butType = '1'
      this.queryParams.status = '1'
      this.queryParams.createTime = new Date(new Date()).format("yyyy-MM-dd")
      this.handleQuery()
    },
    handleExport() {

    }
  },
  mounted() {
    //tab标签的权限控制
    this.$nextTick(() => {
      //首先把所有的都隐藏
      this.$refs.tabs.$children[0].$refs.tabs[0].style.display = 'none';
      this.$refs.tabs.$children[0].$refs.tabs[1].style.display = 'none';
    });
  }
};
</script>
